<template>
  <div class="bottomLeftChart">
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="100%"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                },
                label:{
                  backgroundColor:'#00000094'
                }
            },
            formatter: newData.formatter
          },
          grid: {
            bottom: "20%"
          },
          xAxis: {
            type: "category",
            position: "bottom",
            axisLine: true,
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12,
              rotate: 25
            },
            axisPointer: {
                type: 'shadow'
            }
          },
          yAxis:{
            name:'分数',
            max:45,
            nameTextStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: 14
            },
            splitNumber: 4,
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                opacity: 0.1
              }
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12
            }
          },
          dataset: {source: newData.sourceData},
          series: newData.seriesData
        }
      },
      immediate: true,
      deep: true
    },
  },
}
</script>

<style lang="scss" scoped>
.bottomLeftChart{
  width: 100%;
  height: 100%;
  >div{
    width: 100%;
    height: 100%;
  }
}
</style>